<template>
  <div class="container">
    <el-card class="box-card">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="关键字"
          >&nbsp;
          <el-input placeholder="根据编号搜索" v-model="shrinkageValue"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="info" icon="el-icon-delete" size="small" @click="removeID"
            >清除</el-button
          >
          <el-button type="primary" icon="el-icon-search" size="small" @click="shrinkageID"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
      <div class="iconArticle">
        <i class="el-icon-info"></i>
        数据一共{{ total }}条
      </div>
      <el-table style="width: 100%" border :data="PleaseList">
        <el-table-column label="编号" prop="id"> </el-table-column>
        <el-table-column label="题型" width="80">
          <template #default="{ row }">
            {{ topic(row.questionType) }}
          </template>
        </el-table-column>
        <el-table-column label="题目编号">
          <template #default="{ row }">
            <el-button
              @click="preview(item)"
              type="text"
              v-for="item in row.questionIDs"
              :key="item.number"
              >{{ item.number }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="180" prop="addTime"> </el-table-column>
        <el-table-column label="答题时间(s)" prop="totalSeconds"> </el-table-column>
        <el-table-column label="正确率(%)" prop="accuracyRate"> </el-table-column>
        <el-table-column label="录入人" prop="userName"> </el-table-column>
        <el-table-column label="操作" width="80">
          <template #default="{ row }">
            <el-button
              type="danger"
              icon="el-icon-delete"
              plain
              circle
              @click="delPleaseList(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-sizes="[20, 30, 50, 100]"
        layout="->, prev, pager, next , sizes , jumper"
        :total="total"
        @size-change="handleSizeChange"
        :page-size="params.pagesize"
        @current-change="handleCurrentChange"
      >
      </el-pagination>

      <questions-preview
        :dialog-visible="dialogVisible"
        :row="dialogInfo"
        @close-dialog="closeDialog"
      ></questions-preview>
    </el-card>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
import QuestionsPreview from '@/module-hmmm/components/questions-preview'

export default {
  components: {
    QuestionsPreview
  },

  data() {
    return {
      dialogVisible: false,
      dialogInfo: {},

      // 接口要求
      params: {
        page: 1,
        pagesize: 20,
        keyword: ''
      },
      total: 0, // 数据总条数
      PleaseList: [], // 数据列表
      // 删除需要的数据
      delList: {
        id: '',
        choiceState: 0
      },
      // 存id
      idList: [],
      // 输入框的值
      shrinkageValue: ''
    }
  },
  // 生命周期函数
  mounted() {
    this.getPleaseList()
  },
  // 方法
  methods: {
    // 获取组题列表
    async getPleaseList() {
      const res = await randoms(this.params)
      // 数据总条数
      this.total = res.data.counts
      //  数据列表
      this.PleaseList = res.data.items
      // 当前页
      this.params.page = Number(res.data.page)
      // 当前页面总条数
      this.params.pagesize = Number(res.data.pagesize)
    },
    // 题型
    topic(value) {
      // console.log(value)
      const map = {
        1: '单选',
        2: '多选',
        3: '简答',
        4: '其他'
      }
      return map[value]
    },
    // 当前页面显示多少数据数据
    handleSizeChange(val) {
      this.params.pagesize = val
      this.getPleaseList()
    },
    // 点击第几页
    handleCurrentChange(val) {
      this.params.page = val
      this.getPleaseList()
    },
    // 点击删除
    delPleaseList(id) {
      // console.log(id);
      this.$confirm('你确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await removeRandoms({
            ...this.delList,
            id: id
          })
          this.getPleaseList()
          this.$message.success('删除成功')
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 搜索按钮
    async shrinkageID() {
      this.params.keyword = this.shrinkageValue
      const res = await randoms(this.params)
      this.PleaseList = res.data.items
    },
    // 点击清除搜索框数据
    removeID() {
      this.shrinkageValue = ''
      this.shrinkageID()
    },

    // 关闭弹框
    closeDialog() {
      this.dialogVisible = false
    },

    // 预览
    preview(row) {
      this.dialogVisible = true
      this.dialogInfo = row
    }
  }
}
</script>

<style scoped lang="less">
.box-card {
  margin: 10px 7px;
  .el-form {
    display: flex;
    justify-content: space-between;
    margin-left: 60px;
    /deep/ .el-input {
      width: 280px;
      height: 29px;
    }
  }
  .el-table {
    padding-bottom: 10px;
    margin-bottom: 20px;
    /deep/ .el-table__cell.is-leaf {
      border-bottom: 2px solid #e8e8e8;
    }
    .el-button {
      margin-left: 0;
    }
  }
  .iconArticle {
    height: 50px;
    margin-left: 35px;
    font-size: 14px;
    color: rgb(144, 147, 153);
  }
  .el-pagination {
    // display: flex;
    // align-items: center;
    margin-right: 40px;
  }
}
</style>
